<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
        <f:view>
            <f:loadBundle basename="bundle.messages" var="msg"/>
            <h1><h:outputLabel>#{msg.introproposal}</h:outputLabel></h1>
            <h:form id="newproposal">
                <p:panel id="panel">
                    <!-- Destinos -->
                    <p:panel id="panel_destinos">
                        <p><h:outputLabel for="destinos" value="#{msg.introdestiny}"/></p> 
                        <p><table>
                            <th>
                                <td valign="top">
                                    <!-- Lista paises -->
                                    <p:selectOneMenu id="listadestinos" value="#{nuevaPropControl.paisToAdd}" filter="true" 
                                                filterMatchMode="startsWith" label="#{msg.destino}">                        
                                        <f:selectItem itemLabel="#{msg.selectone}" itemValue="-1" noSelectionOption="true"/>
                                        <f:selectItems value="#{nuevaPropControl.paisSelect}"/>
                                    </p:selectOneMenu>  
                                </td><td valign="top">
                                    <!-- Boton añadir -->
                                    <p:commandButton action="#{nuevaPropControl.addDestino()}" value="#{msg.add}" ajax="true" update="destinos"/>
                                </td><td>
                                    <!-- Paises añadidos -->
                                    <p:selectOneListbox id="destinos" value="#{nuevaPropControl.destSelect}">
                                        <f:selectItems value="#{nuevaPropControl.destinos}"/>                       
                                    </p:selectOneListbox>
                                </td><td valign="top">
                                    <!-- Botón quitar -->
                                    <p:commandButton action="#{nuevaPropControl.deletePais()}"  value="#{msg.delete}" ajax="true" update="destinos" /> 
                                </td>  
                            </th>
                         </table>  
                         </p>
                    </p:panel>
                    
                    <!-- Fechas -->
                    <p:panel id="panel_fechas">
                        <p>
                            <h:outputLabel for="fechas" value="#{msg.introdates}"/><br/></p>
                        <p>
                        <table>
                            <tr>                                
                                <td valign="top">
                                    <!-- Desde -->
                                    <h:outputLabel for="fechas" value=" #{msg.from} "/>
                                    <p:calendar id="fecha_ini" navigator="true" value="#{nuevaPropControl.fechaIni}" label="#{msg.date_ini}" 
                                            pattern="dd/MM/yyyy" yearRange="c:c+2" size="10" binding="#{bfecha_ini}">
                                        <p:ajax listener="#{nuevaPropControl.listenFechaIniChange()}"/>
                                    </p:calendar>
                                </td><td valign="top">
                                    <!-- Hasta -->
                                    <h:outputLabel for="fechas" value=" #{msg.to} "/>
                                    <p:calendar id="fecha_fin" navigator="true" value="#{nuevaPropControl.fechaFin}" label="#{msg.date_fin}" 
                                            pattern="dd/MM/yyyy" yearRange="c:c+2" size="10"  validator="dateBiValidator">
                                        <f:attribute name="fecha_ini" value="#{bfecha_ini.value}"/>                                
                                    </p:calendar>                         
                                </td><td valign="top">
                                    <!-- Botón añadir -->
                                    <p:commandButton action="#{nuevaPropControl.addParFecha()}"
                                                     update="panel_fechas" value="#{msg.add}"/>                                                        
                                </td><td valign="top">
                                    <!-- Lista fechas -->
                                    <p:selectOneListbox id="fechas" value="#{nuevaPropControl.fechasChosen}" style="width: 12em">
                                        <f:selectItems value="#{nuevaPropControl.fechas}"/>
                                    </p:selectOneListbox>                                    
                                </td><td valign="top">
                                    <!-- Botón quitar -->
                                    <p:commandButton action="#{nuevaPropControl.deleteFecha()}"
                                                     update="panel_fechas" value="#{msg.delete}"/>                                                        
                                </td>
                            </tr><tr>
                                <td colspan="5">
                                    <p:message for="fecha_ini"/>
                                    <p:message for="fecha_fin"/>
                                    <p:message for="fechas"/>
                                </td>
                            </tr>
                        </table>                        
                        </p>
                    </p:panel>
                    
                    <!-- Número de días y coste-->
                    <p:panel id="panel_ndias">
                        <p>
                            <table style="width: 100%">
                                <tr><td style="width: 50%">
                                    <!-- Número de días -->
                                    <h:outputLabel value="#{msg.ndias_between} "/>
                                    <p:inputText id="ndiasmin" value="#{nuevaPropControl.numDiasMin}" label="#{msg.ndiasmin}" 
                                                 binding="#{ndias}" size="2">
                                        <p:ajax listener="#{nuevaPropControl.listenNDiasMinChange()}"/>
                                    </p:inputText>
                                    <h:outputLabel value=" #{msg.y} "/>
                                    <p:inputText id="ndiasmax" value="#{nuevaPropControl.numDiasMax}" label="#{msg.ndiasmax}" 
                                                 size="2" validator="numDiasValidator">
                                        <f:attribute name="ndias" value="#{ndias.value}"/>
                                    </p:inputText>
                                </td><td>
                                    <!-- Coste -->
                                    <h:outputLabel value="#{msg.expectedcost} "/>
                                    <p:inputText id="costemin" value="#{nuevaPropControl.costeMin}" label="#{msg.expectedcost}"
                                                 binding="#{coste}" size="5">
                                        <p:ajax listener="#{nuevaPropControl.listenCostChange()}"/>
                                    </p:inputText>
                                    <h:outputLabel value=" #{msg.y} "/>
                                    <p:inputText id="costemax" value="#{nuevaPropControl.costeMax}" label="#{msg.y}" 
                                                  size="5" validator="costeValidator">
                                         <f:attribute name="ndias" value="#{ndias.value}"/>
                                     </p:inputText>
                                    <h:outputLabel value=" #{msg.euros} "/>
                                </td></tr>
                            </table>
                        </p>
                    </p:panel>   

                    <p:panel id="plan_eco_panel">
                        <p>
                            <h:outputLabel value="#{msg.planeco}"/></p>
                        <table>
                            <tr><td>
                                <p:selectOneListbox id="plan_eco" value="#{nuevaPropControl.planEco}" label="#{msg.planeco}" style="width: 12em">
                                    <f:selectItem itemLabel="-- #{msg.not_selected} --" noSelectionOption="true"/>
                                    <f:selectItems value="#{nuevaPropControl.plEcoSelect}"/>
                                    <p:ajax update="panel_plan_eco" listener="#{nuevaPropControl.listenPlanChange}"/>                                                                
                                </p:selectOneListbox>
                           </td><td>
                                <p:panel id="panel_plan_eco"  style="width: 170px; border-width: 0px">
                                     <h:outputText value="#{nuevaPropControl.descriplan}" />
                                </p:panel>
                           </td></tr>
                        </table>                    
                    </p:panel>
                    <p:panel id="panel_description">
                        <p>
                            <table><tr><td>
                                <h:outputLabel value="#{msg.writedescription}"/><br/>
                                <p:inputTextarea rows="10" cols="50" counter="counter" maxlength="500"       
                                                    counterTemplate="{0} #{msg.charremain}." autoResize="false" 
                                                    value="#{nuevaPropControl.descripcion}"/><br/>
                                <h:outputText id="counter" />
                            </td><td>
                                <p:selectOneRadio id="publico" value="#{nuevaPropControl.viajePublico}">  
                                    <f:selectItem itemLabel="#{msg.public_travel}" itemValue="#{true}" />  
                                    <f:selectItem itemLabel="#{msg.private_travel}" itemValue="#{false}" />  
                                </p:selectOneRadio>
                            </td></tr></table>
                        </p>
                    </p:panel>
                    <div>
                        <!-- Guardar propuesta -->
                        <p:commandButton value="#{msg.save}" update="panel" 
                                         action="#{nuevaPropControl.saveProposal}"/>                     
                        <!-- Reset form -->
                        <p:commandButton value="#{msg.reset}" update="panel" process="@this">   
                            <p:resetInput target="panel"/>
                        </p:commandButton>    
                    </div>
                </p:panel>                                
            </h:form>
        </f:view>
</ui:composition>
    
